<template>
  <div class="login-container" :class="{ frontActive: !props.imgChange }">
    <h2>登录</h2>
    <div class="input-group">
      <el-form ref="LoginForm" :model="LoginData" :rules="loginRules">
        <el-form-item prop="userName" class="form-item">
          <i class="fa fa-user-o icon"></i>
          <div class="inputBox">
            <el-input
              type="text"
              v-model="LoginData.userName"
              class="input"
              placeholder="请输入昵称、邮箱"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password" class="form-item">
          <i class="fa fa-key icon"></i>
          <div class="inputBox">
            <el-input
              type="password"
              class="input"
              v-model="LoginData.password"
              placeholder="请输入密码"
            />
          </div>
        </el-form-item>
      </el-form>
    </div>

    <el-button
      class="btn"
      @click="LoginBtnClick(LoginForm)"
      :loading="loginLoading"
      >登录</el-button
    >
    <div class="other">
      <span class="other-content">其他登录方式</span>
      <ul>
        <li @click="otherLogin">
          <img src="../../../assets/icons/QQ.png" />
        </li>
        <li @click="otherLogin">
          <img src="../../../assets/icons/gitee.png" />
        </li>

        <li @click="otherLogin">
          <img src="../../../assets/icons/wechat.png" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { defineProps, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import Cache from "@/utils/Cache";
const router = useRouter();
const LoginForm = ref();
let loginLoading = ref(false);
const LoginData = reactive({
  userName: "",
  password: "",
});
const props = defineProps({
  imgChange: {
    type: Boolean,
    required: true,
  },
});

// 登录按钮事件
const LoginBtnClick = async (LoginForm) => {
  await LoginForm.validate((valid) => {
    if (!valid) {
      ElMessage({
        message: "输入信息格式有误！",
        type: "warning",
        center: true,
      });
      return;
    }
    handleUserLogin();
  });
};

// 用户登录请求
const handleUserLogin = () => {
  loginLoading.value = true;
  // 判断缓存是否存在用户
  if (!Cache.getItem("user")) {
    ElMessage({
      message: "用户不存在！请先注册！",
      type: "warning",
      center: true,
    });
    loginLoading.value = false;
    clearInfo();
    return;
  }
  const user = Cache.getItem("user");
  if (testDataisEmail(LoginData.userName)) {
    if (
      user.email === LoginData.userName &&
      user.password === LoginData.password
    ) {
      loginSuccess(user);
    } else {
      ElMessage({
        message: "邮箱或密码错误！",
        type: "warning",
        center: true,
      });
      clearInfo();
    }
  } else {
    if (
      user.nickName === LoginData.userName &&
      user.password === LoginData.password
    ) {
      loginSuccess(user);
    } else {
      ElMessage({
        message: "账号或密码错误！",
        type: "warning",
        center: true,
      });
      clearInfo();
    }
  }

  loginLoading.value = false;
};

// 成功登录逻辑
const loginSuccess = (user) => {
  ElNotification({
    title: "登录成功！",
    message: "即将跳转至个人页面！",
    type: "warning",
  });
  user.createTime = Date.now(); // 更新时间戳
  Cache.saveItem("user", user);
  setTimeout(() => {
    router.push("/my");
  }, 2000);
};

// 判断用户输入是否为邮箱
const testDataisEmail = (info) => {
  const rep = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(com|cn|net)$/;
  return rep.test(info);
};

const otherLogin = () => {
  ElMessage({ message: "暂未开发！", type: "warning", center: true });
};

// 清空表单
const clearInfo = () => {
  LoginData.userName = "";
  LoginData.password = "";
};

const loginRules = {
  userName: [
    {
      required: true,
      message: "请输入昵称或邮箱！",
      trigger: "blur",
    },
    { min: 3, max: 20, message: "用户名长度不符！", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "请输入密码！",
      trigger: "blur",
    },
    { min: 5, message: "密码长度不少于5位！", trigger: "blur" },
  ],
};
</script>

<style scoped lang="less">
.frontActive {
  transform: rotateY(180deg);
}
.login-container {
  position: absolute;
  top: 0;
  width: 300px;
  height: 400px;
  box-sizing: content-box;
  padding: 25px;
  transition: 0.7s;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 5px 10px #410141, -5px -5px 10px #580158;
  border-radius: 10px;
  background-color: #5a096abd;
  h2 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 20px;
    margin: 0;
    margin-bottom: 30px;
  }
  .input-group {
    display: flex;
    flex-direction: column;
    align-items: center;

    .form-item {
      margin-bottom: 25px;
      width: 290px;
    }

    .inputBox {
      width: 250px;
    }
    /deep/ .el-form-item__content {
      flex-wrap: nowrap;
    }
    .input /deep/ .el-input__wrapper {
      background-color: #fff;
      border-radius: 0;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      width: 240px;
      height: 40px;
      border: none;
      outline-style: none;
      padding: 5px;
    }
    /deep/ .el-form-item__error {
      margin-left: 40px;
      margin-top: 5px;
      color: rgb(250, 157, 50);
    }
    .icon {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      display: block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: #410141;
    }
  }
  .btn {
    width: 290px;
    height: 40px;
    color: #fff;
    transition: 0.2s;
    background-color: #410141;
    border: none;
  }
  .btn:hover {
    background-color: #630263;
  }

  .other {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: rgb(238, 236, 236);
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        cursor: pointer;
        margin: 10px;
        float: left;
        padding: 10px;
        border-radius: 50%;
        background-color: #fff;
        transition: all 0.3s;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
